<template>
  <div class="nav-title" :style="fixedTitle">
    <slot>
      <div class="nav-title-slot">
        <SvgIcon class="icon" icon-class="xiangzuo" @click.stop.native="clickHandle" />
        <span>{{ title }}</span>
      </div>
    </slot>
  </div>
</template>
<script>
import SvgIcon from '@/components/SvgIcon'
export default {
  name: 'NavTitle',
  components: {
    SvgIcon
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    fixed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    fixedTitle() {
      return this.fixed ? { position: 'fixed', top: 0, left: 0 } : {}
    }
  },
  methods: {
    clickHandle() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.nav-title{
  width: 100%;
  background-color: #00C8B4;
  // padding: 0 10px;
  z-index: 999;
  .nav-title-slot{
    display: flex;
    align-items: center;
    &>.icon{
      margin-right: 5PX;
      width: 24PX;
      height: 24PX;
      font-size: 24PX;
      flex: 0 0 24PX;
      margin-right: 3PX;
      color: #fff;
      fill: #fff;
    }
    &>span{
      flex: 0 0 calc(100% - 15PX);
      color: #fff;
      font-size: 16px;
      .textOverflow(calc(100% - 15PX))
    }
  }
}
</style>
